<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>34 mixins 监控</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1> Vue 选项 mixins</h1>
    <a href="../index.html">返回</a>
    <hr />
    <div id="app">
        <p>
            mixins 用法：<br />
            在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。<br />
            很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。<br />
            执行顺序:（注意，不会覆盖，而是会执行两遍）看F12<br />
            全局的混入》混入的》构造器里的<br />
            <span style="color:red">notice: 全局混入的代码要放在Vue实例之前才能生效</span>
        </p>
        {{message}}
        <hr />
        现在温度是：{{newtem}}<br />
        <button @click="uptemp">升高温度</button>
        <button @click="downtemp">降低温度</button>

        <button @click="upto">測試mixin 的methods</button>
    </div>
    <script type="text/javascript">


        var AddLog = {
            updated: function () {
                console.log("数据变化了" + this.temperature);
            }
        }
        //全局的代码要放在Vue实例之前
        Vue.mixin({
            updated: function () {
                console.log("我是全局的mixins updated");
            },
            methods:{
                upto:function(d){
                    console.log('這個是mixin裡面的methods:upto');
                    app.temperature+=10;
                }
            }

        })


        var app = new Vue({
            el: "#app",
            updated: function () {
                console.log("构造器内的updated")
            },
            data: {
                message: "Vue watch",
                temperature: 10,
                notice: "无"
            },
            computed: {
                newtem: function () {
                    return "现在是 " + this.temperature + "度"
                }
            },
            methods: {
                uptemp: function () {
                    this.temperature += 2;
                },
                downtemp: function () {
                    this.temperature -= 2;
                }
            },
            mixins: [AddLog]
        });


    </script>
</body>

</html>